<template>
  <!--pages/login/selectStores/index.wxml-->
  <view class="login_box">
    <mineNavbar :styleData="styleData" class="tabbar"></mineNavbar>
    <view class="top">
      <image src="http://sb9sps5gr.hn-bkt.clouddn.com/bgImg.png" />
      <tabbarTop class="tabbarTop"></tabbarTop>
      <view class="middle">
        <image src="@/static/images/recruit/storeXin.png" />
        <text>请选择为您服务的门店</text>
      </view>
      <view class="selectStores">
        <view @click="dropDown" class="s_top">
          <image src="@/static/images/recruit/user2.png" />
          <text>选择门店</text>
          <image src="@/static/images/recruit/icondown.png" />
        </view>
        <view class="s_down" v-if="isshowStores">
          <view v-for="item in storesList" :key="item.storeId" @click="changeSelct(item)">
            <text class="paddingSty"></text>
            <view :class="storeId == item.storeId ? 'active' : ''">{{
              item.storeName
            }}</view>
            <icon type="success" size="20" class="paddingSty" v-if="storeId == item.storeId" />
          </view>
        </view>
      </view>
    </view>
    <view class="bootm">
      <button :class="storeId ? 'activeHigh' : 'commit'" :disabled="!storeId" @click="handleGohome">
        确认提交
      </button>
    </view>
  </view>
</template>

<script>
import { selectStoreList } from "@/api/common.js";
import { bindStore } from "@/api/login.js";

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
      },
      storesList: [],
      isshowStores: false,
      roleId: 1, // 字段改为userType vueX
      storeId: "",
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  async onShow() { },
  onReady() { },
  mounted() {
    let that = this;
    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        const { errMsg, longitude, latitude } = res;
        if (errMsg == "getLocation:ok") {
          selectStoreList({
            longitude,
            latitude,
          }).then((res) => {
            // if (res.code == 200)
            that.storesList = res;
            console.log(res, "获取门店数据");
          });
        }
      },
      fail: function (res) {
        let that = this;
        uni.showModal({
          title: "提示",
          content: "请开启手机定位功能并重新登录",
          cancelText: "取消",
          confirmText: "确定",
          success: function (res) {
            that.$store.dispatch("LogOut").then(() => {
              if (res.confirm) {
                that.isLogin = 0;
                that.numDetails = null;
                that.userInfo = {
                  wxUserId: "", // 求职者微信用户编号
                  wxUserName: "", // 用户名
                  wxAvatar: "", // 头像
                  wxMobile: "", // 电话
                  wxSex: "", // 性别（0男 1女 2未知）
                  verifyStatus: "", // 实名认证状态 (0未实名 1已实名)
                };
                uni.navigateTo({
                  url: "/pages/recruit/login/index",
                });
              }
            });
          },
        });
      },
    });

    console.log(that.storesList, "that.storesLists");
  },
  methods: {
    // 下拉选择门店
    dropDown() {
      if (this.storesList.length === 0) {
        uni.showToast({
          title: '没有可选择的门店',
          icon: 'none'
        })
      }
      this.isshowStores = !this.isshowStores;
    },
    // 点击选择门店
    changeSelct(e) {
      this.storeId = e.storeId;
    },
    // 进入主页
    handleGohome() {
      bindStore({
        storeId: this.storeId,
        type:'0'
      }).then((res) => {
        if (res.code == 200) {
          uni.switchTab({
            url: "/pages/tabbarChange/firstPage/index",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* pages/login/selectStores/index.wxss */
.login_box {
  background: #fff;
  height: 100vh;

  .tabbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .top {
    width: 750rpx;
    height: 754rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .tabbarTop {
      position: absolute;
      top: 0;
      left: 0;
    }

    .middle {
      position: absolute;
      top: 300rpx;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 200rpx;

      image {
        width: 170rpx;
        height: 48rpx;
      }

      >text {
        margin-top: 10px;
        font-size: 28rpx;
        color: #00000073;
        font-weight: 900;
      }
    }

    .selectStores {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 435rpx;

      >.s_top {
        width: 562rpx;
        height: 106rpx;
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 24rpx;
        display: flex;
        align-items: center;

        >image:first-child {
          width: 32rpx;
          height: 32rpx;
          padding: 0 10px;
        }

        >image:last-child {
          width: 22rpx;
          height: 22rpx;
          padding: 0 10px;
        }

        >text {
          width: 80%;
          color: #000000a3;
          font-size: 28rpx;
        }
      }

      >.s_down {
        width: 562rpx;
        height: 550rpx;
        overflow: auto;

        >view {
          width: 100%;
          display: flex;
          font-size: 28rpx;
          color: #00000073;
          margin: 10px 0;

          >.paddingSty {
            width: 32rpx;
            padding: 0 10px;
          }

          >view {
            width: 80%;
          }

          .active {
            color: #000;
          }
        }
      }
    }
  }

  .bootm {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 400rpx;

    >view {
      width: 420rpx;
      height: 98rpx;
      border-radius: 49rpx;
      font-size: 32rpx;
      text-align: center;
      line-height: 98rpx;
      color: #fff;
    }

    .commit {
      background: #ffdeb4;
      width: 420rpx;
      height: 98rpx;
      border-radius: 49rpx;
      text-align: center;
      line-height: 98rpx;
      color: #fff;
      font-weight: 500;
      font-size: 32rpx;
    }

    .activeHigh {
      background: #ff9e24;
      width: 420rpx;
      height: 98rpx;
      border-radius: 49rpx;
      text-align: center;
      line-height: 98rpx;
      color: #fff;
      font-weight: 500;
      font-size: 32rpx;
    }
  }
}
</style>
